<template>
	<div>
		<div class="container">
			<div class="header ">
				<headerLink></headerLink>
			</div>
			<div class="body">
				<div class="left">
					<div class="left1">
						<basics5></basics5>
					</div>
					<div class="left2">
						<basics8></basics8>
						
					</div>
					<div class="left3">
						<basics9></basics9>
						
					</div>
					<div class="left4">
						<basics10></basics10>
					</div>					
				</div>
				<div class="center">					
                    <baiduMap></baiduMap>					
				</div>
				<div class="right">
					<div class="right1">
						<block3></block3>
					</div>
					<div class="right2">
						<block2></block2>
					</div>
					<div class="right3">
						<basics6></basics6>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
    import headerLink from './components/header3'
    import baiduMap from './components/baiduMap-air'
    import lineCharts2 from './components/lineCharts2'
    import bar1 from './components/bar1'
    import block2 from './components/block2'
    import block3 from './components/block3'
    import basics8 from './components/basics8'
    import basics9 from './components/basics9'
    import basics10 from './components/basics10'
    import basics5 from './components/basics5'
    import basics6 from './components/basics6'
    import heatmap from './components/heatmap'
    import gas1 from './components/top10_gas1'
    import gas2 from './components/top10_gas2'
	export default {
		components: {
           headerLink,
           baiduMap,
           lineCharts2,
           bar1,
           block2,
           block3,
           basics5,
           heatmap,
           basics6,
           gas1,
           gas2,
           basics8,
           basics9,
           basics10
		},
		data() {
			return {
				timer: null
			}
		},
		created() {


	    },
		methods: {

		}
	}
</script>
<style lang="scss" scoped>
	.container {
		position: absolute;
		display: flex;
		flex-direction: column;
		background: url(/img/bigScreen/16.png)no-repeat;
		background-size: 100% 100%;
		width: 100%;
		::-webkit-scrollbar {
			display: none;
		}
		* {
			box-sizing: border-box;
		}
	}
	
	.header {
		height: 86px;	
		margin-bottom: 10px;	
	}	
	
	.body {		
		height: 984px;
		display: flex;
		justify-content: space-between;
		.left {
			width: 27%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.left1 {
				height: 21.3%;
			}
			.left2 {
				height: 25.3%;
			}
			.left3 {
				height: 25.3%;
			}
			.left4 {
				height: 25.3%;
			}		
		}
		.center {
			width: 45%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.right {
			width: 27%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.right1 {
				height: 31.3%;
			}
			.right2 {
				height: 31.3%;
			}
			.right3 {
				height: 36.3%;
			}
		}
	}
</style>